package com.example.japinhands.ui.screen

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.navigation.NavController
import com.example.japinhands.JapViewModel
import com.example.japinhands.route.Route

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ManageWordScreen(
    viewModel: JapViewModel, navController: NavController
) {
    LaunchedEffect(Unit) {
        viewModel.getAllWords()
    }

    DisposableEffect(Unit) {
        onDispose {
            viewModel.clearWords()
        }
    }

    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2)
    ) {
        viewModel.wordsUI.forEach {
            item {
                JapaneseWordCardTest(word = it, onClick = {
                    navController.navigate(Route.WordDetail.createRoute(it.id))
                })
            }
        }
    }
}